<!-- 这是主页 -->
<link rel="stylesheet" href="/stylesheets/index.css">
<%- include header %>
<div class="page-group index">
  <div class="page page-current" id="page-index">
    <header class="bar bar-nav">
      <a class="icon icon-me pull-left open-panel" data-panel=".panel-left"></a>
      <h1 class="title">首页</h1>
    </header>
    <%# tab %>
    <nav class="bar bar-tab">
      <a class="tab-item external tab-link link-teacher" href="#teacher" data-tab="teacher">
          <span class="icon icon-home"></span>
          <span class="tab-label">导师</span>
      </a>
      <a class="tab-item external tab-link active link-home" href="#home" data-tab="home">
          <span class="icon icon-me"></span>
          <span class="tab-label">首页</span>
      </a>
      <a class="tab-item external tab-link link-course" href="#course" data-tab="course">
          <span class="icon icon-star"></span>
          <span class="tab-label">教程</span>
      </a>
    </nav>
    <div class="tabs">

      <%# 教程tab %>
      <div class="content index-content course">
        <div class="content-block-title">教程列表</div>
        <div class="list-block media-list">
          <ul>
            <% posts.forEach(function (post, index) { %> 
              <li>
                <a href="/u/<%= post.name %>/<%= post.time.day %>/<%= post.title %>" class="item-link item-content">
                  <div class="item-media"><img class="list-img" src="/images/favicon.png"></div>
                  <div class="item-inner">
                    <div class="item-title-row">
                      <div class="item-title"><%= post.title %></div>
                      <div class="item-after">
                        <%= post.tags %>
                      </div>
                    </div>
                    <div class="item-subtitle"><%= post.time.minute %></div>
                    <div class="item-text"><%- post.post %></div>
                  </div>
                </a>
              </li>
            <% }) %>
          </ul>
        </div>
      </div>

      <%# 首页tab %>
      <div class="content index-content home active">
        <div class="content-block-title">优秀导师</div>
        <div class="card facebook-card">
          <a href="/u/<%= user.name %>">
            <div class="card-header no-border">
              <div class="facebook-name"><%= user.nickname %></div>
              <div class="facebook-date">7月29日</div>
            </div>
            <div class="card-content">
              <% if (user.name == 'lianmingtang') { %>
                <img class="card-img" src="/images/me.jpg">
              <% } else if (user.name == 'pengbincheng') { %>
                <img class="card-img" src="/images/bincheng.jpg">
              <% } else if (user.name == 'linweijian') { %>
                <img class="card-img" src="/images/weijian.jpg">
              <% } %>
            </div>
            <div class="card-content">
              <div class="card-content-inner">
                <p><%= user.info %></p>
              </div>
            </div>
            <div class="card-footer no-border">了解导师</div>
          </a>
        </div>
        
        <div class="content-block-title">优秀教程</div>
          <div class="list-block media-list">
            <ul>
              <% posts.forEach(function (post, index) { %> 
                <li>
                  <a href="/u/<%= post.name %>/<%= post.time.day %>/<%= post.title %>" class="item-link item-content">
                    <div class="item-media"><img class="list-img" src="/images/favicon.png"></div>
                    <div class="item-inner">
                      <div class="item-title-row">
                        <div class="item-title"><%= post.title %></div>
                        <div class="item-after">
                          <%= post.tags %>
                        </div>
                      </div>
                      <div class="item-subtitle"><%= post.time.minute %></div>
                      <div class="item-text"><%- post.post %></div>
                    </div>
                  </a>
                </li>
              <% }) %>
            </ul>
          </div>
      </div>

      <%# 导师tab  %>
      <div class="content index-content teacher">
        <div class="content-block-title">导师名单</div>
        <div class="card facebook-card">
          <a href="/u/linweijian">
            <div class="card-header no-border">
              <div class="facebook-name">林梦仙</div>
              <div class="facebook-date">7月29日</div>
            </div>
            <div class="card-content">
              <img class="card-img" src="/images/weijian.jpg">
            </div>
            <div class="card-content">
              <div class="card-content-inner">
                <p>热爱前端开发，.net开发，喜欢运动，网络文学，期待和志同道德的朋友一起交流。</p>
              </div>
            </div>
            <div class="card-footer no-border">了解导师</div>
          </a>
        </div>
        <div class="card facebook-card">
          <a href="/u/pengbincheng">
            <div class="card-header no-border">
              <div class="facebook-name">曼珠之伤  </div>
              <div class="facebook-date">7月29日</div>
            </div>
            <div class="card-content">
              
                <img class="card-img" src="/images/bincheng.jpg">
              
            </div>
            <div class="card-content">
              <div class="card-content-inner">
                <p>生命如流水，感觉脆弱却一直在奔淌不息。希愿你能在不住的流淌中，找寻到生命的意义，于路上不断见证，不断学习，不断成长。</p>
              </div>
            </div>
            <div class="card-footer no-border">了解导师</div>
          </a>
        </div>
        <div class="card facebook-card">
          <a href="/u/lianmingtang">
            <div class="card-header no-border">
              <div class="facebook-name">连明堂</div>
              <div class="facebook-date">7月29日</div>
            </div>
            <div class="card-content">
              <img class="card-img" src="/images/me.jpg">
            </div>
            <div class="card-content">
              <div class="card-content-inner">
                <p>开始吧，坚持下去。<br/>
                  o，正式介绍一下，我喜欢摄影哦，因为.&$*#@，还喜欢静静，静静地~*#￥%，哦我的名字是连明堂</p>
              </div>
            </div>
            <div class="card-footer no-border">了解导师</div>
          </a>
        </div>
      </div>
    </div>
    
  </div>
  <div class="panel-overlay"></div>
  <div class="panel panel-left panel-reveal user-info">
    <div class="content-block">
      <%# 注册登录 %>
      <% if (user) { %>
        <p class="portrait">
          <% if (user.name == 'lianmingtang') { %>
            <img class="user-photo" src="/images/me.jpg">
          <% } else if (user.name == 'pengbincheng') { %>
            <img class="user-photo" src="/images/bincheng.jpg">
          <% } else if (user.name == 'linweijian') { %>
            <img class="user-photo" src="/images/weijian.jpg">
          <% } %>
          <a href="/u/<%- user.name %>" class="close-panel c-blue"><%= user.name %></a>&nbsp;
          <a title="登出" href="/logout">登出</a>
        </p>

        <form action="/search" method="GET">
          <div class="search-input">
            <label class="icon icon-search" for="search"></label>
            <input type="text" name="keyword" id='search' placeholder='输入课程关键字...'/>
          </div>
        </form>
      <% } else { %>
        <a href="/login">登录</a> / <a href="/reg">注册</a>
      <% } %>

      <%# 标签 %>
      <div class="content">
        <div class="content-block-title">课程</div>
        <div class="list-block">
          <ul>
            <% tags.forEach(function (tag, index) { %>
              <% if (tag) { %>
                <li class="item-content">
                  <a class="link-a" href="/tags/<%= tag %>?title=<%= tag %>">
                    <div class="item-media"><i class="icon icon-f7"></i></div>
                    <div class="item-inner">
                      <div class="item-title"><%= tag %></div>
                    </div>
                  </a>
                </li>
              <% } %>
            <% }) %>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

<%- include footer %>
<script src="/javascripts/index.js"></script>
